<meta charset="UTF-8">
<style>
    *{
        padding: 0;
        margin: 0;
        
    }
    .clearfix:after{
        display: table;
        content: "";
        clear: both;
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    #box{
        width:600px;
        margin: 10px auto;
    }
    #fatie{
        background:#009966; 
        border: none;
        outline: none;
        padding: 7px 30px;
        color: white;
        font-size: 20px;
        font-weight: bold;
        border-radius: 8px;
        margin-bottom: 6px;
        
    }
    .btn{
        border-bottom: 1px solid #ccc;
    }
    .bankuai,.time{
        font-size: 12px;
        color: gray;
    }
    .bankuai{
        margin-right: 20px;
    }
    img {
        width: 60px;
        border-radius: 50%;
        margin-right: 10px;
    }
    .title{
        margin: 6px 0;
    }
    .temp1{
        border-bottom: 1px dotted #ccc;
        padding: 15px 0;
        display: none;
        height: 0;
        opacity: 0;
        transition: all .3s;
        overflow: hidden;
    }
    #inputtitle{
        width:438px;
    }
    #form>div{
        margin-bottom: 10px;
    }
    #form{
        width:450px;
        margin:10px 80px;
        border:1px solid #ccc;
        padding: 10px;
        display: none;
        position:fixed;
        z-index: 1;
        background: white;
    
    }
    #form input,select{
        height:30px;
    }
    select{
        width:200px;
    }
    #fabu{
        width: 150px;
        background: #009966;
        border:none;
        outline: none;
        color: white;
        font-size: 15px;
        border-radius: 6px;
    }
    .fs{
        font-size: 12px;
    }
</style>
<div id="box">
    <div class="btn"><input type="button" value="发帖" id="fatie"/></div>
    <div id="form">
        <div><input placeholder="请输入标题（1-50个字符）" id="inputtitle"/></div>
        <div>
            所属版块：
            <select id="inputbankuai">
                <option>请选择版块</option>
                <option>电子书籍</option>
                <option>职业规划</option>
                <option>新生报到</option>
            </select>
        </div>
        <div><textarea cols="60" rows="13" id="cnt"></textarea></div>
        <input type="button" value="发布" id="fabu"/>
    </div>
    
    <div class="clearfix temp1" id="temp">
        <div class="fl"><img src="tou01.jpg" class="pic"/></div>
        <div class="fl">
            <h3 class="title">123</h3>
            <div class="clearfix">
                <div class="fl fs">版块：<span class="bankuai">职业规划</span></div>
                <div class="fl fs">发表时间：<span class="time">2018-1-6 12:27</span></div>
            </div>
        </div>
    </div>
</div>

<script>
    var oldp;
    fatie.onclick = function(){
        form.style.display = "block";
    }
    fabu.onclick = function(){
        form.style.display = "none";
        var titles = document.getElementsByClassName("title");
        titles[0].innerHTML = inputtitle.value;
        var bankuais = document.getElementsByClassName("bankuai");
        bankuais[0].innerHTML = inputbankuai.value;
        var times = document.getElementsByClassName("time");
        var now = new Date();
        var y = now.getFullYear();
        var m = now.getMonth()+1;
        var d = now.getDate();
        var h = now.getHours();
        var f = now.getMinutes();
        times[0].innerHTML = y+"-"+m+"-"+d+" "+h+":"+f;
        var pics = document.getElementsByClassName("pic");
        var r = Math.floor(Math.random()*4)+1;
        pics[0].src = "tou0"+r+".jpg";

        var newp = temp.cloneNode(true);
        newp.style.display = "block";
        newp.id = "";
        setTimeout(function(){
            newp.style.height = 60;
            newp.style.opacity = 1;
        },100)
        //console.log(newp);
        if(oldp){
            box.insertBefore(newp,oldp);
        }else{
            box.appendChild(newp);
        }
       oldp = newp;
       inputtitle.value = "";
       inputbankuai.value = "请选择版块";
       cnt.value = "";
    }
</script>
